<!--
  Jeepay search 条件通用组件

  @author terrfly
  @site https://www.jeequan.com
  @date 2021/12/27 19:14
-->

<template>
  <div class="table-page-search-wrapper">
    <!-- 表格组件标题 -->
    <!-- <div class="table-name"><b>{{ tableName }}</b></div> -->

    <a-form layout="inline" class="table-head-ground">
      <div ref="tableLayer" class="table-layer">
        <slot />

        <div class="table-search-item">
          <a-button
            type="primary"
            @click="searchFunc"
          >
            <search-outlined />查询
          </a-button>
          <a-button
            class="ref-left-10"
            @click="props.resetFunc"
          >
            <reload-outlined />重置
          </a-button>
        </div>
      </div>
    </a-form>
  </div>

  <div class="split-line">
    <div v-if="vdata.searchConditionFlag !== 'none'" class="btns">
      <div
        v-if="vdata.searchConditionFlag == 'less'"
        @click="moreSearchConditionAction(true)"
      >
        更多筛选<i class="bi bi-chevron-down" />
      </div>
      <div v-else @click="moreSearchConditionAction(false)">
        收起筛选<i class="bi bi-chevron-up" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  getCurrentInstance,
  onMounted,
  defineProps,
  onBeforeUnmount
} from 'vue'
import { useRoute } from 'vue-router'
import { debounce } from '@/utils/throttle'
// 获取当前路由标题
const route = useRoute()
let routeTitle = route.matched
let tableName = routeTitle[routeTitle.length - 1].meta.title

const tableLayer = ref() // 获取父元素DOM对象

// 定义传入属性
const props = defineProps({
  searchConditionNum: { type: Number, default: 7 }, // 默认显示的搜索数量(不包含两个按钮)
  searchFunc: { type: Function, default: () => {} }, //搜索条件
  resetFunc: { type: Function, default: () => {} }
})

onMounted(() => {
  // 获取子元素节点
  moreSearchConditionAction(false)
})

let vdata = reactive({
  searchConditionFlag: 'hide' // 搜索条件显示类型： hide: 不显示该按钮，   less: 精简搜索，  more : 包含更多搜索
})

// 更多条件， 显示 or  隐藏
function moreSearchConditionAction(isShow) {
  let layerList = tableLayer.value.getElementsByClassName('table-search-item')
  // console.log(layerList.length, props.searchConditionNum)
  if (layerList.length - 1 <= props.searchConditionNum) {
    return (vdata.searchConditionFlag = 'none')
  }

  // 更改页面显示效果
  vdata.searchConditionFlag = isShow ? 'more' : 'less'

  // 显示 or 隐藏
  for (let i = props.searchConditionNum; i < layerList.length - 1; i++) {
    layerList[i].style.display = isShow ? 'block' : 'none'
  }
}
const debounceTime = debounce(searchEnter, 300)
function searchEnter(e) {
  if (e.keyCode == 13) {
    const clsName = document.querySelector('.table-page-search-wrapper')
    const open = document.querySelector('.ant-drawer-open')
    if (clsName && !open) {
      props.searchFunc()
    }
  }
}

window.addEventListener('keydown', debounceTime)
onBeforeUnmount(() => {
  window.removeEventListener('keydown', debounceTime)
})
</script>

<style scoped lang="less">
.split-line {
  border-bottom: 1px solid #ebeff2;
  position: relative;
  -webkit-touch-callout: none;
  user-select: none;
}

.btns {
  width: 100px;
  height: 34px;
  cursor: pointer;
  border: 1px solid #ebeff2;
  border-radius: 5px;
  position: absolute;
  left: 50%;
  margin-left: -50px;
  top: 50%;
  margin-top: -17px;
  background-color: #fff;
  font-size: 12px;

  div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    color: #79807e;
  }
}
.btns::before {
  content: '';
  position: absolute;
  width: calc(100% + 2px);
  height: 50%;
  background-color: #fff;
  top: -1px;
  left: -1px;
  z-index: 1;
}

i {
  display: inline-block;
  margin-left: 5px;
}
.bi-chevron-up::before,
.bi-chevron-down::before {
  font-size: 6px;
}
</style>
